<template>
  <div>
    <div id="ls-container">
      <div class="nextPage">
        <el-button @click="previousPageHandle">上一张</el-button>
        <el-button @click="nextPageHandle">下一张</el-button>
      </div>
      <div id="label-studio"></div>
    </div>
  </div>
</template>

<script setup lang="ts">
// import 'default-passive-events'
import {onMounted} from "vue";
import { dataSetStore } from 'src/stores/dataSet';
import {updateDataAnnotation} from 'src/api/dataset'
import { useRouter } from 'vue-router';
import { ElMessageBox } from 'element-plus'
const router = useRouter();
const props = defineProps({
  labelObj: {
    type: Object
  },
});
onMounted(() => {
  let labelOption:any = props.labelObj;
  let dataId = labelOption.id;
  let annotationConfig = dataSetStore().labelUseData.annotation_config;
  const projectId = router.currentRoute.value.params.project_id;
  init(labelOption, annotationConfig)
  async function init(obj: any, str: string) {
    LabelStudio?.destroyAll()
    let ls = new LabelStudio("label-studio", {
      // 标注UI配置
      config: str,
      interfaces: [

        "side-column",

      ],
      // 数据标注任务
      task: obj.annotation_data,

      onLabelStudioLoad: function (LS:any) {
        let c = null;
        if (obj.annotation_data.annotations?.length > 0) {
          // 选择第一个标注
          c = obj.annotation_data.annotations[0];
        } else {
          // 自动新建一个标注
          c = LS.annotationStore.addAnnotation({
            userGenerate: true
          });
        }
        LS.annotationStore.selectAnnotation(c.id);
      }
    });

    function prepareData(annotation: any, { includeId, draft } = {}) {
      const userGenerate =
        !annotation.userGenerate || annotation.sentUserGenerate;

      const result = {
        // task execution time, always summed up with previous values
        lead_time: (new Date() - annotation.loadedDate) / 1000 + Number(annotation.leadTime ?? 0),
        // don't serialize annotations twice for drafts
        result: (draft ? annotation.versions.draft : annotation.serializeAnnotation()) ?? [],
        draft_id: annotation.draftId,
        parent_prediction: annotation.parent_prediction,
        parent_annotation: annotation.parent_annotation,
      };

      if (includeId && userGenerate) {
        result.id = parseInt(annotation.pk);
      }

      return result;
    }

    /*
    * 更新数据标注信息事件
    */
    ls.on("updateAnnotation", async (lss, annotation) => {
      updateDataAnnotation(projectId, dataSetStore().labelUseData.id, dataId, prepareData(annotation)).then((res: any) => {
        emitFun()
      }).catch(error => {
        console.log(error)
      })
    });

    /*
    * 首次上传数据标注信息事件
    */
    ls.on("submitAnnotation", async (lss:any, annotation:any) => {
      updateDataAnnotation(projectId, dataSetStore().dataset_id, dataId, prepareData(annotation)).then((res: any) => {
        emitFun()
      }).catch(error => {
        console.log(error)
      })

    });
  }
})
const emits = defineEmits(['emitsFun','emitNextPage','emitPreviousPage'])

function emitFun() {
  emits('emitsFun', true)
}

//上一页
function previousPageHandle(){
  let labelOption:any = props.labelObj;
  let dataId = labelOption.id;
  emits('emitPreviousPage', dataId)
}

//模拟提交点击事件
function simulateClick(elementId: string) {
  const element = document.getElementById(elementId);
  if (element) {
    element.click();
  }
}

//下一页
function nextPageHandle(){
  let labelOption:any = props.labelObj;
  let dataId = labelOption.id;
  emits('emitNextPage', dataId);
  simulateClick('custom-submit');//模拟点击提交按钮
}
</script>


<style scoped lang="scss">
::v-deep .lsf-modal {
  position: fixed!important;
}
.nextPage{
  display: flex;
  justify-content: space-between;
  width: 100%;
  button{
    margin-right: 18px;
  }
}
</style>
